<template>
  <div class="newLeftMenu">
    <!--    <div class="top">-->
    <!--      <i class="iconfont icon-database"></i>-->
    <!--    </div>-->
    <el-menu :default-active="$route.fullPath"
             class="el-menu-vertical-demo" 
             @select="linkTab">
      <el-submenu :index="'1-1'" v-for="(item,index) in calList">
        <template slot="title">{{ item.category }}</template>
        <el-menu-item v-for="(ite,inde) in item.apiApplicationMethodPOS" :index="'/apiDetial?id='+ite.id">{{ ite.name }}</el-menu-item>
        <!-- <el-menu-item index="3-3">{name:'addPlanJSH',query:{scdType:'BULK_CARGO'}}装船清单</el-menu-item>
        <el-menu-item index="3-3"{name:'addPlanJZX',query:{scdType:'CONTAINER'}}>卸船清单</el-menu-item> -->
      </el-submenu>

    </el-menu>
  </div>

</template>

<script>
export default {
  name: 'newLeftMenu',
  computed:{
    userType(){
      return this.$store.getters.userType
    },
  },
  data(){
    return {
      calList:[],
      defaultActive:''
    }
  },
  mounted() {
    this.outApiPaginQuery()
  },
  methods: {
    outApiPaginQuery(){
      this.$api.outApiPaginQuery().then(res=>{
        this.calList = res.data
        let queryId = this.$route.query.id
        if(queryId){}else{
          if(res.data.length!==0){
            if(res.data[0].apiApplicationMethodPOS.length!=0){
              this.$router.push('/apiDetial?id='+res.data[0].apiApplicationMethodPOS[0].id)
            }
          }
        }
      })
    },
    linkTab(e) {
      this.$router.push(e)
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-menu-item.is-active {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-submenu__title:hover {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-menu-item:hover {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-menu {
  border-right: none;
}
.newLeftMenu {
  background-color: white;
  width: 200px;
  // min-height: 700px;
  height: 80%;
  // height: 80rem;
  //max-height: 1200px;
  //height: 1200px;
  overflow-y: auto;
  overflow-x: hidden;
  .top {
    width: 100%;
    height: 47px;
    background-color: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 24px;
      color: rgba(119, 119, 119, 0.7);
    }
  }
}
</style>